
/*
* @Author: 董洌淇
* @Date: 2020年10月20日14:20:57
* @Last Modified by: 董洌淇
* @Last Modified time: 2020年10月20日14:21:06
* @Description: 消息按钮页面 -标识，暂时无用
*/
<template>
	<view class="message-box">
		<cu-custom bgColor="bg-blue" :isBack="true"><block slot="backText"></block><block slot="content">消息</block></cu-custom>
		<view class="msg-list-box" v-for="(item, index) in msgList" :key="index" @click="goMsgList(item)">
			<text class="iconfont iconfont-style" :class="item.iconClass" :style="{'color': item.color}"></text>
			<view class="msg-style">
				<text>{{ item.title }}</text>
				<view>
					<text class="msg-num margin-r-20upx">{{ item.number > 99 ? '99+' : item.number }}</text>
					<text class="cuIcon-right"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getMsgStatistical } from '@/api/msgApi'
	export default {
		name: 'messagePage',
		data() {
			return {
				msgStatistical: {} // 消息统计
			}
		},
		computed: {
			msgList() {
				return [
					{
						type: '1',
						color: '#1FA3FF',
						iconClass: 'iconyujing',
						title: '预警',
						number: this.msgStatistical.warning
					},
					{
						type: '2',
						color: '#FFB21F',
						iconClass: 'iconbaojing',
						title: '报警',
						number: this.msgStatistical.alarm
					},
					{
						type: '3',
						color: '#FD8C29',
						iconClass: 'icongaobaojing',
						title: '高报警',
						number: this.msgStatistical.urgent
					},
					{
						type: '4',
						color: '#F0535A',
						iconClass: 'iconyingjishijian',
						title: '超高报警',
						number: this.msgStatistical.emergency
					}
				]
			}
		},
		onLoad () {
			this.getMsgStatisticalFun()
		},
		methods: {
			// 获取消息统计
			getMsgStatisticalFun () {
				getMsgStatistical().then(res => {
					if (res.data.code === 0) {
						this.msgStatistical = res.data.data
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						})
					}
				}).catch(err => {
					uni.showToast({
						title: '服务器错误，请稍后尝试!',
						icon: 'none',
						duration: 2000
					})
				})
			},
			// 跳转到消息列表
			goMsgList (data) {
				uni.navigateTo({
					url:"./msgList?type=" + data.type
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.message-box {
		.msg-list-box {
			padding: 50upx 5% 50upx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.iconfont-style {
				font-size: 100upx;
				padding-right: 50upx;
			}
			.msg-style {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32upx;
				border-bottom: 2upx solid $uni-border-color;
				flex: 1;
				padding: 30upx 0 30upx;
				.msg-num {
					font-size: 28upx;
					display: inline-block;
					width: 52upx;
					height: 52upx;
					border-radius: 50%;
					text-align: center;
					line-height: 52upx;
					color: $uni-text-color-inverse;
					background-color: $uni-color-error;
				}
			}
		}
	}
</style>
